<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../less/fenlei.css" />
	</head>
	<body>
		<div class="wrap">
			<div class="headBox">
				<img src="../img/classification_icon_back.png" class="back_icon">
				<h2 class="title">分类</h2>
				<img src="../img/nav%20bar_icon_search.png" class="search_img">
			</div>
			<div class="contentBox">
				<ul class="navList">

				</ul>
				<div class="content">
					<div class="banner">
						<img src="../img/classification_photo_banner.png"  class="banner_img">
					</div>
					<ul class="contentUl">
						
					</ul>
				</div>
			</div>
		</div>
	</body>
	<script src="../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		window.onload=function(){
			shengcheng()
			$('.navLi').eq(0).addClass('active');
		}
		var navList = [{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					}
				]
			},
			{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					},
					{
						img:'../img/classification_img.png',
						text:'构图'
					}
				]
			},
			{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					},
					{
						img:'../img/classification_img.png',
						text:'光线'
					}
				]
			},
			{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					},
					{
						img:'../img/classification_img.png',
						text:'后期'
					}
				]
			},
			{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					},
					{
						img:'../img/classification_img.png',
						text:'书籍'
					}
				]
			},
			{
				text: '教程知识',
				contentList:[
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					},
					{
						img:'../img/classification_img.png',
						text:'审美'
					}
				]
			},
			{
				text: '教程知识',
			},
			{
				text: '教程知识',
			},
			{
				text: '教程知识',
			},
			{
				text: '教程知识',
			},
			{
				text: '教程知识',
			},
			{
				text: '教程知识',
			},
			
		]
		
		var contentList=[
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					},
					{
						img:'../img/classification_img.png',
						text:'相机'
					}
				]
		
		
		for (var i = 0; i < navList.length; i++) {
			$('.navList').append('<li class="navLi" id="' + i + '">' + navList[i].text + '</li>')
		}
		// $('.navList').on('click','.navLi',function(){
		// 	console.log($(this))
		// })
		$('.navLi').each(function(index) {
			$(this).on('click', function() {
				// console.log(index);
				$(".navLi").removeClass("active");
				$('.navLi').eq(index).addClass('active');
				for(var i=0;i<navList.length;i++){
					if(i==index){
						contentList=navList[i].contentList
						console.log(contentList)
					}
				}
				shengcheng()
			})
		})
		function shengcheng(){
			$('.contentLi').remove()
			for(var i=0;i<contentList.length;i++){
				$('.contentUl').append('<li class="contentLi"><img src="'+contentList[i].img+'" ><p>'+contentList[i].text+'</p></li>')
			}
		}
		$('.search_img').click(function(){
			localStorage.setItem('path','fenlei')
			window.location.href="../search.html"
		})

		$('.back_icon').click(function(){
			window.history.go(-1)
		})
	</script>
</html>
